<template>
  <div 
     class="btn"
    @click="btn"
    :class="{
        primary:type==='primary',
        danger:type==='danger',
    }">
      <slot>按钮</slot>
  </div>
</template>

<script>
export default {
    props:{
        type:String,
    },
   methods: {
       btn(e){
        //    console.log('你点击子组件')
           this.$emit('click',e)
       }
   }
}
</script>

<style lang="less" scoped>
.btn {
   width: 318px;
   height: 48px;
   background-color:#ccc;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 20px;
   border-radius:24px;
   margin: 20px auto;
}
.primary {
    background-color:green;
    color: #fff;
}
.danger{
   background-color:red;
   color: #fff;
}
</style>